<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<title>商城详情</title>
		<!-- 引入YDUI样式 -->
		<link rel="stylesheet" href="{:_SKIN}/weixin/jifen/ydui/demo/css/ydui.css" />
		<!-- 引入YDUI自适应解决方案类库 -->
		<script src="{:_SKIN}/weixin/jifen/ydui/build/js/ydui.flexible.js"></script>
		<style type="text/css">
			.m-navbar {
				background-color: #15ce67;
			}
			
			.navbar-item .back-ico:before {
				color: #FFFFFF;
			}
			
			.icon-share3:before {
				color: #FFFFFF;
				font-size: 0.36rem;
			}
			
			.biaoti {
				background-color: #FFFFFF;
				padding: 10px;
			}
			
			.bt1 {
				font-size: 16px;
				color: #333;
				overflow: hidden;
				margin: 5px 0;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			
			.bt2 {
				color: #B8B8B8;
				font-size: 14px;
				margin: 5px 0;
			}
			
			.bt2 span {
				padding-right: 30px;
			}
			
			.bt3 {
				font-size: 16px;
				color: #333;
			}
			
			.red {
				color: #de1420 !important;
			}
			
			.shuoming {
				background-color: #FFFFFF;
				padding: 10px;
				margin-top: 10px;
			}
			
			.sm1 {
				font-size: 16px;
				color: #333333;
				height: 30px;
				border-bottom: 1px solid #E6E6E6;
			}
			
			.sm2 {
				color: #B8B8B8;
				font-size: 14px;
				padding: 5px;
			}
			
			.sm2 div {
				margin: 3px 0;
			}
			
			.lv {
				color: #15ce67;
			}
			
			.sm3 {
				margin: 5px 0;
			}
			.ft{
				display: block;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-right: 1px solid #CCCCCC;
			}
			.icon-phone1:before ,.icon-shopcart-outline:before ,.icon-like-outline:before{
			   color: #333333;
			   font-size: 22px;
			}
			.ft1{
				width: 14%;
				
			}
			.ft2{
				width: 29%;
				color: #333333;
				font-size: 16px;
			}
			.ft3{
				width: 29%;
				color: #FFFFFF;
				background-color: #15ce67;
				font-size: 16px;
			}
		</style>
	</head>

	<body>

		<section class="g-flexview">

			<header class="m-navbar">
				<a href="javascript:history.go(-1)" class="navbar-item"><i class="back-ico"></i></a>
				<div class="navbar-center"><span class="navbar-title" style="color: #FFFFFF;">商品详情</span></div>
				<a href="{:url('index')}" class="navbar-item"><i class="icon-share3"></i></a>
			</header>

			<section class="g-scrollview">

				<div class="m-slider" data-ydui-slider>
					<div class="slider-wrapper">
						<div class="slider-item">
							
								<img src="{$t.pic}">
							
						</div>
						

					</div>
					<div class="slider-pagination"></div>
				</div>

				<div class="biaoti">
					<div class="bt1"><b>{$t.name}</b></div>
					<div class="bt2">
						<span>原价：{$t.price+16.8}</span>
						<span>人气：{$t.click}</span>
					</div>
					<div class="bt3">价格：<b class="red">￥{$t.price}</b></div>
				</div>

				<div class="shuoming">
					<div class="sm1">礼品卡说明</div>
					<div class="sm2">
						<div><b class="lv">•</b>&nbsp;本卡仅限搜禾网内可礼品购买的商品使用。</div>
						<div><b class="lv">•</b>&nbsp;本卡使用期为三个月。</div>
						<div><b class="lv">•</b>&nbsp;持卡人应妥善保存卡片和密码，如因卡片和密码保存不当导致相关损失，责任自负。</div>
						<div><b class="lv">•</b>&nbsp;本卡不记名、不挂失、不提现，遗失不补办。</div>
					</div>
				</div>

				<div class="shuoming">
					<div class="sm1">注意事项</div>
					<div class="sm2">
						<div><b class="lv">•</b>&nbsp;通过非法途径获得礼品后进行的正常兑换行为，或不按商品的使用规则进行兑换，商家有权不提供活动。</div>
						<div><b class="lv">•</b>&nbsp;凡以不正当手段(包括但不限于作弊、扰乱系统、实施网络攻击等)进行兑换，平台有权终止该次兑换。</div>
					</div>
				</div>

				<div class="shuoming">
					<div class="sm1">商品详情</div>
					<div class="sm3" id="ct">
						{$t.content}
					</div>
				</div>

			</section>
           {eq name="ustate" value="0"}
			<footer class="m-tabbar" style="padding: 0;">
				
				<a href="javascript:alert('礼品卡余额不足')" class="ft ft2" style="width: 49.9%">
					立即购买
				</a>
				<a href="javascript:alert('礼品卡余额不足')" class="ft ft3" style="width: 49.9%">
					加入购物车
				</a>
			</footer>
          {else /}
            
            <footer class="m-tabbar" style="padding: 0;">
				
				<a href="{:url('jforder',['id'=>$t['id']])}" class="ft ft2" style="width: 49.9%">
					立即购买
				</a>
				<a href="{:url('jforder',['id'=>$t['id']])}" class="ft ft3" style="width: 49.9%">
					加入购物车
				</a>
			</footer>
 
          {/eq}
		</section>

		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="{:_SKIN}/weixin/jifen/ydui/build/js/ydui.js" type="text/javascript"></script>
		<script>
			
			$("#ct img").css('width',"100%");
		</script>
	</body>

</html>